<template>
  <div ref="artRef" class="art-player"></div>
</template>
<script setup>
  import Artplayer from 'artplayer'
  import { onMounted, ref, onBeforeUnmount } from 'vue'
  const Art = ref(null)
  const artRef = ref(null)
  const props = defineProps(['url'])
  console.log('defineProps url >>>', props.url)
  onMounted(() => {
    Art.value = new Artplayer(
      {
        url: props.url,
        container: artRef.value,
        setting: true,
        playbackRate: true, // 播放速度
        flip: true, // 翻转
        aspectRatio: true, // 宽高比
        screenshot: true, // 截图
        hotkey: true, // 是否使用快捷键
        pip: true, // pip画中画
        fullscreen: true, // 窗口全屏
        subtitleOffset: true, // 字幕偏移
        // fullscreenWeb: true, // 网页全屏
        // miniProgressBar: true, // 小型进度条
        playsInline: true, // 播放内嵌
        lang: 'zh-cn',
        lock: true, // 锁定 是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏
        fastForward: true, // 快进
        autoPlayback: true, // 自动 回放功能
        autoOrientation: true, // 自动旋转
        airplay: true,
      },
      function onReady(art) {
        this.play()
      },
    )
  })
  onBeforeUnmount(() => {
    Art.value.destroy()
  })
</script>
<style scoped>
  .art-player {
    /* width: 480px;
    height: 270px; */
    width: 100%;
    height: 100%;
    border: 1px solid red;
  }
</style>
